<template>
	<div>
		<VueUeditorWrap v-model="message" :config="myConfig" @ready="ready" />
		<!-- <el-dialog
      title="预览"
      :modal="false"
      :visible.sync="dialogVisible"
      width="75%"
      :show-close="false"
    > -->
		<el-drawer title="" size="50%" :append-to-body="true" :visible.sync="dialogVisible" :with-header="false" @close="close">
			<div class="radio-container">
				<div class="content" v-html="viewHtml"></div>
				<el-row>
					<el-col :span="4">常用规则</el-col>
					<el-col :span="20">
						<el-radio-group v-model="radio1" @change="setStyle">
							<el-radio :label="1">默认</el-radio>
							<el-radio :label="2">常用</el-radio>
							<el-radio :label="3">大字体</el-radio>
							<el-radio :label="4">去除样式</el-radio>
						</el-radio-group>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="4">网站规则</el-col>
					<el-col :span="20">
						<el-radio-group v-model="radio2" @change="setStyle">
							<el-radio :label="5">默认</el-radio>
							<el-radio :label="6">常用</el-radio>
							<el-radio :label="7">大字体</el-radio>
							<el-radio :label="8">去除样式</el-radio>
						</el-radio-group>
					</el-col>
				</el-row>
				<div class="footer">
					<el-button type="primary" @click="save">确认</el-button>
					<el-button type="primary" @click="close">关闭</el-button>
				</div>
			</div>
		</el-drawer>
		<!-- </el-dialog> -->
	</div>
</template>
<script>
import VueUeditorWrap from 'vue-ueditor-wrap';
import {
	clearStyle,
	setStyleToRichText,
	convertWordToHtml
	// baseStyle,
	// commonStyle,
	// bigFontStyle,
} from '@/utils/typeSetting.js';
export default {
	name: 'UEditor',
	components: {
		VueUeditorWrap
	},
	data() {
		return {
			message: '',
			dialogVisible: false,
			viewHtml: '',
			radio1: 1,
			radio2: 1,
			editorInstance: null,
			myConfig: {
				// 编辑器不自动被内容撑高
				autoHeightEnabled: false,
				// 初始容器高度
				initialFrameHeight: this.ueHeight,
				// 初始容器宽度
				initialFrameWidth: this.ueWidth,
				// 上传文件接口
				serverUrl: '',
				UEDITOR_HOME_URL: '/UEditor/'
			}
		};
	},
	watch: {
		defaultMsg(val) {
			this.message = val;
		},
		clear(flag) {
			if (!flag) this.message = '';
		},
		radio1(val) {
			if (val) {
				this.radio2 = undefined;
			}
		},
		radio2(val) {
			if (val) {
				this.radio1 = undefined;
			}
		}
	},
	props: {
		//编辑器高度
		ueHeight: {
			type: Number,
			default: 200
		},
		//编辑器宽度
		ueWidth: {
			type: Number,
			default: 820
		},
		//编辑器默认值
		defaultMsg: {
			type: String,
			default: ''
		},
		clear: Boolean
	},
	mounted() {
		this.message = this.defaultMsg;
	},
	methods: {
		ready(editor) {
			this.editorInstance = editor;
		},
		showDialog() {
			this.message = this.editorInstance.getContent();
			this.setStyle(1);
			this.dialogVisible = true;
		},
		save() {
			this.message = this.viewHtml;
			this.radio = 1;
			this.dialogVisible = false;
		},
		close() {
			this.radio1 = 1;
			this.dialogVisible = false;
		},
		setStyle(val) {
			let str = convertWordToHtml(this.message);
			str = setStyleToRichText(str, baseStyle);
			switch (val) {
				case 1:
					this.viewHtml = str;
					break;
				case 2:
					this.viewHtml = setStyleToRichText(str, commonStyle);
					break;
				case 3:
					this.viewHtml = setStyleToRichText(str, bigFontStyle);
					break;
				case 4:
					str = clearStyle(str);
					this.viewHtml = setStyleToRichText(str, baseStyle);
					break;
				case 5:
					this.viewHtml = str;
					break;
				case 6:
					str = clearStyle(str);
					this.viewHtml = setStyleToRichText(str, commonStyle);
					break;
				case 7:
					str = clearStyle(str);
					this.viewHtml = setStyleToRichText(str, bigFontStyle);
					break;
				case 8:
					str = clearStyle(str);
					this.viewHtml = setStyleToRichText(str, baseStyle);
					break;
			}
		}
	}
};
</script>
<style scoped>
.content {
	overflow-y: auto;
	height: 85%;
}
::v-deep .el-dialog {
	background: #fff !important;
}
.radio-container {
	padding: 5%;
	position: relative;
	height: 100%;
}
.footer {
	position: absolute;
	left: 5%;
	bottom: 5%;
}
</style>
